<template>
	<view class="content">
		<pubTitle title="首页" subtitle="index page" :index="123"></pubTitle>
		
		
		
		<view class="box1">传统px像素单位</view>
		<view class="box2">响应式rpx像素单位</view>
		<view>
			<text>文字可选？？？</text>
		</view>
		<view>
			<text selectable user-select>文字可选2222222？？？</text>
		</view>
		<!-- scroll-view学习 -->
		<scroll-view class="scroll" scroll-x scroll-y>
			<view class="group">
				<view class="item">
					111
				</view>
				<view class="item">
					222
				</view>
				<view class="item">
					333
				</view>
				<view class="item">
					444
				</view>
				<view class="item">
					555
				</view>
			</view>
		</scroll-view>
		
		<!-- swiper学习 -->
		<swiper class="swiper" circular  duration="300" 
			autoplay interval="3000"
			indicator-dots	indicator-color="#000000" indicator-active-color="#ff0000">
			<swiper-item class="item">
				<image src="../../static/001.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/002.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/003.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!--  image学习 -->
		<image src="/static/001.png" mode="aspectFill"></image>
		
		<!-- 
			页面跳转学习
			1. open-type 跳转方式需要注意一下 -- redirect取代当前页面 navigate之前的页面会保留，可以跳转回来
		 -->
		 <navigator style="line-height: 90rpx; background-color: aqua; text-align: center;margin-bottom: 5rpx;" url="../news/news"> 新闻页面加到tabBar，不支持跳转 </navigator> 
		 <navigator style="line-height: 90rpx; background-color: aqua; text-align: center;margin-bottom: 5rpx;" url="../news/news" open-type="redirect"> 使用redirect跳转tabBar可以 </navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		.box1 {
			width: 200px;
			height: 200px;
			background-color: green;
		}

		.box2 {
			width: 200rpx;
			height: 200rpx;
			background-color: yellowgreen;
		}

		.scroll {
			border: 1px solid red;
			box-sizing: border-box; //将边框变为内边框（外边框可能会被基础到外面看不见）
			height: 110rpx;

			.group {
				white-space: nowrap; //设置超出不换行

				.item {
					width: 220rpx;
					height: 220rpx;
					background-color: greenyellow;
					margin-right: 10rpx;
					display: inline-block; //设置是行内块，让所有小盒子可以同行展示
				}
			}
		}

		.swiper {
			height: 400rpx;
			.item {
				padding: 0 20rpx;
				box-sizing: border-box;
				image {
					width: 100%;

				}
			}
		}
	}
</style>
